<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style type="text/css">
        html,
        body,
        p,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        #outer {
            border: 1px solid #474958;
            width: 200px;
            margin: 10px auto;
            color: #474958;
            cursor: pointer;
            overflow: hidden;
            zoom: 1;
        }

        #header {
            background: #b6b9c7;
            margin: 1px;
            padding: 5px;
        }

        #triangle {
            border-top: 6px solid black;
            border-left: 6px solid rgba(0, 0, 0, 0);
            border-right: 6px solid rgba(0, 0, 0, 0);
            float: right;
            margin-top: -12px;
        }

        #list {
            border-top: 1px solid #474958;
        }

        #list li {
            background: #e0e2eb;
            margin-bottom: 1px;
        }

        #list li.last {
            margin-bottom: 0;
        }

        #list li:hover {
            background: white;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oHeader = document.getElementById("header");
            var oList = document.getElementById("list");
            var oTri = document.getElementById("triangle");
            var style = oList.style;
            oHeader.onclick = function () {
                if (oList.style.display != "none") {
                    oList.style.cssText = "display:none";
                    oTri.style.cssText = "border-top:0 solid black;border-bottom:6px solid black";
                }
                else {
                    oList.style.cssText = "";
                    oTri.style.cssText = "";
                }

            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <div id="header">
            <p>播放列表...</p>
            <div id="triangle"></div>
        </div>
        <ul id="list">
            <li>歌名1</li>
            <li>歌名2</li>
            <li>歌名3</li>
            <li>歌名4</li>
            <li>歌名5</li>
            <li class="last">歌名6</li>
        </ul>
    </div>
</body>

</html>